<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

// 使用路由
const router = useRouter()

// 使用ref访问DOM元素
const heroContent = ref(null)

// 添加VR效果的函数
const initVREffect = () => {
  if (!heroContent.value) return

  const handleMouseMove = (e) => {
    const rect = heroContent.value.getBoundingClientRect()
    const centerX = rect.width / 2
    const centerY = rect.height / 2
    const x = ((e.clientX - rect.left) / centerX - 1) * 5
    const y = ((e.clientY - rect.top) / centerY - 1) * -5
    heroContent.value.style.transform = `perspective(1000px) rotateY(${x}deg) rotateX(${y}deg)`
  }

  const resetTransform = () => {
    heroContent.value.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)'
  }

  heroContent.value.addEventListener('mousemove', handleMouseMove)
  heroContent.value.addEventListener('mouseleave', resetTransform)
}

// 按钮的点击事件处理函数
const handleExperience = () => {
  router.push('/scenes')
}

const handleLearnMore = () => {
  router.push('/features')
}

const handleDownload = () => {
  router.push('/download')
}

onMounted(() => {
  initVREffect()
})
</script>

<template>
  <div class="home">
    <div class="hero-section vr-parallax-container">
      <div class="vr-hologram">
        <div class="hero-content" ref="heroContent">
          <h1
            class="animate__animated animate__fadeInDown vr-mega-title"
            data-text="进入全新的虚拟现实世界"
          >
            进入全新的<span class="highlight">虚拟现实</span>世界
            <span class="glitch-layer">进入全新的虚拟现实世界</span>
            <span class="glitch-layer">进入全新的虚拟现实世界</span>
            <span class="digital-noise"></span>
          </h1>
          <p class="animate__animated animate__fadeInUp">体验前所未有的沉浸式游戏体验</p>
          <div class="hero-buttons animate__animated animate__bounceIn animation-delay-1">
            <el-button type="primary" size="large" class="vr-neon-btn" @click="handleExperience">
              立即体验
            </el-button>
            <el-button type="info" size="large" class="vr-neon-btn ml-3" @click="handleLearnMore">
              了解更多
            </el-button>
          </div>
          <div
            class="vr-device animate__animated animate__fadeIn animation-delay-2 vr-headset-float"
          >
            <img
              src="https://images.pexels.com/photos/8728383/pexels-photo-8728383.jpeg"
              alt="VR Device"
              class="vr-image"
            />
            <div class="tech-label top-label animate__animated animate__fadeIn animation-delay-3">
              超高清 8K 分辨率
            </div>
            <div class="tech-label right-label animate__animated animate__fadeIn animation-delay-3">
              120Hz 刷新率
            </div>
            <div
              class="tech-label bottom-label animate__animated animate__fadeIn animation-delay-3"
            >
              双眼追踪技术
            </div>
            <div class="tech-label left-label animate__animated animate__fadeIn animation-delay-3">
              超宽视场角
            </div>
          </div>
        </div>
      </div>
      <div class="floating-elements">
        <div class="float-item item-1"></div>
        <div class="float-item item-2"></div>
        <div class="float-item item-3"></div>
        <div class="float-item item-4"></div>
      </div>
      <div class="cyber-grid"></div>
    </div>

    <!-- 科技感统计数据区域 -->
    <div class="stats-section vr-hologram" id="stats-section">
      <div class="container">
        <h2
          class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
          data-text="游戏数据"
          v-intersect
        >
          游戏<span class="highlight">数据</span>
          <span class="glitch-layer">游戏数据</span>
          <span class="glitch-layer">游戏数据</span>
          <span class="digital-noise"></span>
        </h2>
        <div class="stats-container">
          <div class="stat-item animate__animated animate__fadeInUp vr-card" v-intersect>
            <div class="stat-value odometer vr-neon-text" ref="odometer1">3000000+</div>
            <div class="stat-label">全球用户</div>
            <div class="stat-line"></div>
          </div>
          <div
            class="stat-item animate__animated animate__fadeInUp animation-delay-1 vr-card"
            v-intersect
          >
            <div class="stat-value odometer vr-neon-text" ref="odometer2">120+</div>
            <div class="stat-label">游戏场景</div>
            <div class="stat-line"></div>
          </div>
          <div
            class="stat-item animate__animated animate__fadeInUp animation-delay-2 vr-card"
            v-intersect
          >
            <div class="stat-value odometer vr-neon-text" ref="odometer3">98.7%</div>
            <div class="stat-label">好评率</div>
            <div class="stat-line"></div>
          </div>
          <div
            class="stat-item animate__animated animate__fadeInUp animation-delay-3 vr-card"
            v-intersect
          >
            <div class="stat-value odometer vr-neon-text" ref="odometer4">24/7</div>
            <div class="stat-label">技术支持</div>
            <div class="stat-line"></div>
          </div>
        </div>
      </div>
      <div class="vr-data-loader"></div>
      <div class="glowing-particles">
        <div class="particle p1"></div>
        <div class="particle p2"></div>
        <div class="particle p3"></div>
        <div class="particle p4"></div>
        <div class="particle p5"></div>
        <div class="particle p6"></div>
      </div>
    </div>

    <div class="tech-background">
      <div class="features-preview">
        <h2
          class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
          data-text="突破性VR技术"
          v-intersect
        >
          突破性<span class="highlight">VR技术</span>
          <span class="glitch-layer">突破性VR技术</span>
          <span class="glitch-layer">突破性VR技术</span>
          <span class="digital-noise"></span>
        </h2>
        <el-row :gutter="30">
          <el-col :xs="24" :md="8">
            <div class="vr-flip-container">
              <div class="vr-flipper">
                <div class="vr-front">
                  <el-card
                    class="feature-card tech-card animate__animated animate__fadeInLeft vr-card"
                    shadow="hover"
                  >
                    <div class="tech-icon-wrapper">
                      <i class="tech-icon el-icon-magic-stick"></i>
                    </div>
                    <h3 class="vr-neon-text">沉浸式体验</h3>
                    <div class="card-content">
                      完全沉浸式设计，360°全方位交互，让您身临其境地体验游戏世界，忘却现实
                    </div>
                    <div class="tech-line"></div>
                  </el-card>
                </div>
                <div class="vr-back">
                  <el-card class="feature-card tech-card vr-card" shadow="hover">
                    <div class="card-content">
                      <h3 class="vr-neon-text">技术细节</h3>
                      <ul>
                        <li>空间音频技术</li>
                        <li>6自由度运动追踪</li>
                        <li>触觉反馈系统</li>
                        <li>实时环境映射</li>
                      </ul>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :md="8">
            <div class="vr-flip-container">
              <div class="vr-flipper">
                <div class="vr-front">
                  <el-card
                    class="feature-card tech-card animate__animated animate__fadeInUp animation-delay-1 vr-card"
                    shadow="hover"
                  >
                    <div class="tech-icon-wrapper">
                      <i class="tech-icon el-icon-picture-outline"></i>
                    </div>
                    <h3 class="vr-neon-text">高清画质</h3>
                    <div class="card-content">
                      精细的8K超高清贴图与动态光影效果，带来逼真的视觉体验，细节清晰可见
                    </div>
                    <div class="tech-line"></div>
                  </el-card>
                </div>
                <div class="vr-back">
                  <el-card class="feature-card tech-card vr-card" shadow="hover">
                    <div class="card-content">
                      <h3 class="vr-neon-text">技术细节</h3>
                      <ul>
                        <li>8K分辨率渲染</li>
                        <li>全局光照明系统</li>
                        <li>HDR色彩处理</li>
                        <li>次世代材质引擎</li>
                      </ul>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :md="8">
            <div class="vr-flip-container">
              <div class="vr-flipper">
                <div class="vr-front">
                  <el-card
                    class="feature-card tech-card animate__animated animate__fadeInRight animation-delay-2 vr-card"
                    shadow="hover"
                  >
                    <div class="tech-icon-wrapper">
                      <i class="tech-icon el-icon-data-analysis"></i>
                    </div>
                    <h3 class="vr-neon-text">真实物理引擎</h3>
                    <div class="card-content">
                      采用次世代物理引擎，物体交互、碰撞、重力感都模拟真实世界，提供逼真游戏体验
                    </div>
                    <div class="tech-line"></div>
                  </el-card>
                </div>
                <div class="vr-back">
                  <el-card class="feature-card tech-card vr-card" shadow="hover">
                    <div class="card-content">
                      <h3 class="vr-neon-text">技术细节</h3>
                      <ul>
                        <li>高精度碰撞系统</li>
                        <li>仿真流体动力学</li>
                        <li>次表面散射效果</li>
                        <li>高级破坏系统</li>
                      </ul>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- VR设备展示区域 -->
    <div class="vr-devices-section vr-hologram" id="devices-section">
      <div class="container">
        <h2
          class="vr-mega-title vr-hologram-title animate__animated animate__fadeIn"
          data-text="尖端VR设备"
          v-intersect
        >
          尖端<span class="highlight">VR设备</span>
          <span class="glitch-layer">尖端VR设备</span>
          <span class="glitch-layer">尖端VR设备</span>
          <span class="digital-noise"></span>
        </h2>
        <p class="section-subtitle animate__animated animate__fadeIn animation-delay-1" v-intersect>
          我们的VR游戏适配各种主流设备，带来极致沉浸体验
        </p>

        <div class="devices-showcase">
          <div class="device-item animate__animated animate__fadeInLeft" v-intersect>
            <div class="device-image-container">
              <img
                src="https://images.pexels.com/photos/3945656/pexels-photo-3945656.jpeg"
                alt="VR头显"
                class="device-image"
              />
              <div class="device-overlay"></div>
              <div class="device-tech-badge">8K 分辨率</div>
            </div>
            <div class="device-content">
              <h3 class="device-name">VR Pro X9 头显</h3>
              <div class="device-specs">
                <div class="spec-item"><i class="spec-icon">🔍</i> 超高清 8K 双眼</div>
                <div class="spec-item"><i class="spec-icon">⚡</i> 120Hz 高刷新率</div>
                <div class="spec-item"><i class="spec-icon">🎮</i> 无线控制器</div>
                <div class="spec-item"><i class="spec-icon">🔋</i> 8小时超长续航</div>
              </div>
            </div>
          </div>

          <div
            class="device-item animate__animated animate__fadeInRight animation-delay-1"
            v-intersect
          >
            <div class="device-image-container">
              <img
                src="https://images.pexels.com/photos/3945655/pexels-photo-3945655.jpeg"
                alt="VR控制器"
                class="device-image"
              />
              <div class="device-overlay"></div>
              <div class="device-tech-badge">触觉反馈</div>
            </div>
            <div class="device-content">
              <h3 class="device-name">Motion 专业控制器</h3>
              <div class="device-specs">
                <div class="spec-item"><i class="spec-icon">👆</i> 6自由度追踪</div>
                <div class="spec-item"><i class="spec-icon">💫</i> 高精度触觉反馈</div>
                <div class="spec-item"><i class="spec-icon">🔄</i> 手势识别</div>
                <div class="spec-item"><i class="spec-icon">🔌</i> 快速充电</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="devices-rings">
        <div class="device-ring r1"></div>
        <div class="device-ring r2"></div>
        <div class="device-ring r3"></div>
      </div>
    </div>

    <!-- 合作伙伴区域 -->
    <div class="partners-section" id="partners-section">
      <div class="container">
        <h2
          class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
          data-text="技术合作伙伴"
          v-intersect
        >
          技术<span class="highlight">合作伙伴</span>
          <span class="glitch-layer">技术合作伙伴</span>
          <span class="glitch-layer">技术合作伙伴</span>
          <span class="digital-noise"></span>
        </h2>
        <div class="partners-container">
          <div class="partner-item animate__animated animate__zoomIn" v-intersect>
            <div class="partner-logo">NVIDIA</div>
            <div class="partner-tag">图形处理</div>
          </div>
          <div class="partner-item animate__animated animate__zoomIn animation-delay-1" v-intersect>
            <div class="partner-logo">UNITY</div>
            <div class="partner-tag">游戏引擎</div>
          </div>
          <div class="partner-item animate__animated animate__zoomIn animation-delay-2" v-intersect>
            <div class="partner-logo">OCULUS</div>
            <div class="partner-tag">VR平台</div>
          </div>
          <div class="partner-item animate__animated animate__zoomIn animation-delay-3" v-intersect>
            <div class="partner-logo">VALVE</div>
            <div class="partner-tag">分发平台</div>
          </div>
        </div>
      </div>
      <div class="tech-circuit-bg"></div>
      <div class="vr-triangle-network"></div>
    </div>

    <div class="news-section" id="news-section">
      <div class="container">
        <h2
          class="vr-mega-title vr-hologram-title animate__animated animate__fadeIn"
          data-text="最新动态"
          v-intersect
        >
          最新<span class="highlight">动态</span>
          <span class="glitch-layer">最新动态</span>
          <span class="glitch-layer">最新动态</span>
          <span class="digital-noise"></span>
        </h2>
        <el-timeline>
          <el-timeline-item timestamp="2025/1" placement="top">
            <el-card class="news-card">
              <div class="news-image">
                <img src="https://images.pexels.com/photos/3945656/pexels-photo-3945656.jpeg" alt="VR Update" />
              </div>
              <h4>VR游戏新版本发布</h4>
              <p>
                我们很高兴地宣布，VR游戏最新版本已正式发布！本次更新带来全新交互系统与多人连线功能。
              </p>
              <div class="tech-badge">最新版本 v3.5</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2025/" placement="top">
            <el-card class="news-card">
              <div class="news-image">
                <img src="https://images.pexels.com/photos/1439226/pexels-photo-1439226.jpeg" alt="New Map" />
              </div>
              <h4>新地图预告</h4>
              <p>全新地图"星际迷航"即将上线，玩家将可以探索宇宙空间站和外星球表面。敬请期待！</p>
              <div class="tech-badge">即将上线</div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2025/3" placement="top">
            <el-card class="news-card">
              <div class="news-image">
                <img src="https://images.pexels.com/photos/3183150/pexels-photo-3183150.jpeg" alt="Community Event" />
              </div>
              <h4>社区活动开启</h4>
              <p>参与我们的线上社区活动，赢取限定皮肤和装备！本次活动将持续两周，奖励丰厚。</p>
              <div class="tech-badge">活动进行中</div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
      <div class="vr-space-grid">
        <div class="vr-grid-plane"></div>
      </div>
    </div>

    <!-- 用户评价部分 -->
    <div class="testimonials-section">
      <div class="container">
        <h2
          class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
          data-text="用户评价"
          v-intersect
        >
          用户<span class="highlight">评价</span>
          <span class="glitch-layer">用户评价</span>
          <span class="glitch-layer">用户评价</span>
          <span class="digital-noise"></span>
        </h2>
        <p class="section-subtitle animate__animated animate__fadeIn animation-delay-1" v-intersect>
          玩家们对我们的虚拟现实体验的真实反馈
        </p>

        <div class="testimonials-grid">
          <div class="testimonial-card animate__animated animate__fadeInUp" v-intersect>
            <div class="testimonial-header">
              <div class="user-avatar">
                <div class="avatar-circle"></div>
              </div>
              <div class="user-info">
                <div class="user-name">张明</div>
                <div class="rating">
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                </div>
              </div>
            </div>
            <div class="testimonial-content">
              <p>
                这是我体验过的最棒的VR游戏！沉浸感令人难以置信，尤其是太空站场景，真的让我感觉置身于太空中。控制器的触觉反馈非常真实，让交互更加直观。
              </p>
            </div>
            <div class="testimonial-corner tl"></div>
            <div class="testimonial-corner tr"></div>
            <div class="testimonial-corner bl"></div>
            <div class="testimonial-corner br"></div>
          </div>

          <div
            class="testimonial-card animate__animated animate__fadeInUp animation-delay-1"
            v-intersect
          >
            <div class="testimonial-header">
              <div class="user-avatar">
                <div class="avatar-circle"></div>
              </div>
              <div class="user-info">
                <div class="user-name">李小雨</div>
                <div class="rating">
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                </div>
              </div>
            </div>
            <div class="testimonial-content">
              <p>
                图形效果简直惊艳！在远古神庙场景中，每一个细节都被精心设计，壁画和雕像看起来栩栩如生。物理引擎也非常出色，使得游戏中的互动感觉十分真实。
              </p>
            </div>
            <div class="testimonial-corner tl"></div>
            <div class="testimonial-corner tr"></div>
            <div class="testimonial-corner bl"></div>
            <div class="testimonial-corner br"></div>
          </div>

          <div
            class="testimonial-card animate__animated animate__fadeInUp animation-delay-2"
            v-intersect
          >
            <div class="testimonial-header">
              <div class="user-avatar">
                <div class="avatar-circle"></div>
              </div>
              <div class="user-info">
                <div class="user-name">王大伟</div>
                <div class="rating">
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="half-star">★</span>
                </div>
              </div>
            </div>
            <div class="testimonial-content">
              <p>
                多人模式太酷了！能和朋友一起在虚拟现实中冒险是一种全新的社交体验。未来城市场景中的霓虹灯和全息广告让人仿佛真的置身于2150年的世界。
              </p>
            </div>
            <div class="testimonial-corner tl"></div>
            <div class="testimonial-corner tr"></div>
            <div class="testimonial-corner bl"></div>
            <div class="testimonial-corner br"></div>
          </div>

          <div
            class="testimonial-card animate__animated animate__fadeInUp animation-delay-3"
            v-intersect
          >
            <div class="testimonial-header">
              <div class="user-avatar">
                <div class="avatar-circle"></div>
              </div>
              <div class="user-info">
                <div class="user-name">赵丽</div>
                <div class="rating">
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                  <span class="star">★</span>
                </div>
              </div>
            </div>
            <div class="testimonial-content">
              <p>
                作为一名VR游戏资深玩家，我必须说这个游戏设置了新标准。特别是海底世界场景的水下物理效果，珊瑚礁的细节和鱼群的AI行为都令人叹为观止。
              </p>
            </div>
            <div class="testimonial-corner tl"></div>
            <div class="testimonial-corner tr"></div>
            <div class="testimonial-corner bl"></div>
            <div class="testimonial-corner br"></div>
          </div>
        </div>
      </div>
      <div class="testimonial-glow"></div>
    </div>

    <div class="cta-section">
      <div class="container">
        <div class="cta-content animate__animated animate__fadeIn" v-intersect>
          <h2>准备好开始您的VR之旅了吗？</h2>
          <p>加入全球数百万玩家的行列，探索无尽可能的虚拟世界</p>
          <el-button type="primary" size="large" class="glow-button" @click="handleDownload"
            >立即下载</el-button
          >
          <div class="tech-circles">
            <div class="tech-circle c1"></div>
            <div class="tech-circle c2"></div>
            <div class="tech-circle c3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  position: relative;
}

/* 霓虹粒子效果 - 增强版 */
.glowing-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(3px);
  opacity: 0.7;
  z-index: 2;
  animation: particle-float 15s infinite linear;
  box-shadow: 0 0 20px 5px currentColor;
}

.p1 {
  width: 8px;
  height: 8px;
  left: 10%;
  top: 20%;
  color: rgba(0, 195, 255, 0.8);
  animation-duration: 20s;
}

.p2 {
  width: 12px;
  height: 12px;
  left: 30%;
  top: 50%;
  color: rgba(170, 0, 255, 0.8);
  animation-duration: 25s;
  animation-delay: 1s;
}

.p3 {
  width: 6px;
  height: 6px;
  left: 60%;
  top: 30%;
  color: rgba(255, 0, 140, 0.8);
  animation-duration: 18s;
  animation-delay: 2s;
}

.p4 {
  width: 10px;
  height: 10px;
  left: 80%;
  top: 70%;
  color: rgba(0, 195, 255, 0.8);
  animation-duration: 22s;
  animation-delay: 3s;
}

.p5 {
  width: 5px;
  height: 5px;
  left: 20%;
  top: 80%;
  color: rgba(170, 0, 255, 0.8);
  animation-duration: 19s;
  animation-delay: 4s;
}

.p6 {
  width: 9px;
  height: 9px;
  left: 70%;
  top: 10%;
  color: rgba(255, 0, 140, 0.8);
  animation-duration: 24s;
  animation-delay: 5s;
}

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-100px) translateX(50px) rotate(120deg) scale(1.2);
  }
  66% {
    transform: translateY(-50px) translateX(-70px) rotate(240deg) scale(0.8);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(360deg) scale(1);
  }
}

/* 英雄区块增强效果 */
.hero-section {
  height: 100vh;
  position: relative;
  background: linear-gradient(180deg, #08081a, #0a0a1a);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 195, 255, 0.1) 0%, transparent 70%);
  opacity: 0.8;
  z-index: 1;
  animation: pulse-radial 8s infinite alternate;
}

@keyframes pulse-radial {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to right, rgba(0, 195, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(1000px) rotateX(60deg) scale(1.5);
  transform-origin: center bottom;
  animation: grid-move 20s linear infinite;
  z-index: 1;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 1200px;
  padding: 0 20px;
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: #a9c2ff;
}

.highlight {
  position: relative;
  color: #00c3ff;
  animation: glow 3s infinite alternate;
}

@keyframes glow {
  0% {
    text-shadow:
      0 0 5px rgba(0, 195, 255, 0.5),
      0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    text-shadow:
      0 0 20px rgba(0, 195, 255, 0.8),
      0 0 30px rgba(0, 195, 255, 0.5),
      0 0 40px rgba(0, 195, 255, 0.3);
  }
}

.hero-buttons {
  margin-bottom: 50px;
  z-index: 5;
}

/* 浮动元素 */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.float-item {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.5);
  animation: float 20s infinite ease-in-out;
}

.item-1 {
  width: 100px;
  height: 100px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.item-2 {
  width: 150px;
  height: 150px;
  top: 70%;
  left: 20%;
  animation-delay: 5s;
}

.item-3 {
  width: 80px;
  height: 80px;
  top: 40%;
  right: 15%;
  animation-delay: 2s;
}

.item-4 {
  width: 120px;
  height: 120px;
  top: 80%;
  right: 10%;
  animation-delay: 7s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.2;
  }
  25% {
    transform: translateY(-30px) scale(1.1) rotate(5deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(0) scale(1) rotate(10deg);
    opacity: 0.2;
  }
  75% {
    transform: translateY(30px) scale(0.9) rotate(5deg);
    opacity: 0.3;
  }
}

/* VR设备展示区域 */
.vr-device {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.vr-image {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.3);
  transition: all 0.5s ease;
  border: 2px solid rgba(0, 195, 255, 0.3);
  position: relative;
  z-index: 2;
}

.vr-image:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 195, 255, 0.5);
}

.tech-label {
  position: absolute;
  background: rgba(10, 10, 26, 0.8);
  border: 1px solid rgba(0, 195, 255, 0.5);
  padding: 10px 15px;
  border-radius: 8px;
  color: #00c3ff;
  font-size: 0.9rem;
  z-index: 3;
  display: flex;
  align-items: center;
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
  backdrop-filter: blur(5px);
}

.tech-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #00c3ff;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 10px #00c3ff;
}

.top-label {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.right-label {
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
}

.bottom-label {
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.left-label {
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
}

/* 动画延迟类 */
.animation-delay-1 {
  animation-delay: 0.3s;
}

.animation-delay-2 {
  animation-delay: 0.6s;
}

.animation-delay-3 {
  animation-delay: 0.9s;
}

/* 统计数据区域增强 */
.stats-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #0a0a1a, #070713);
  position: relative;
  overflow: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 50px;
}

.stat-item {
  padding: 30px;
  margin: 15px;
  flex: 1;
  min-width: 200px;
  text-align: center;
  overflow: hidden;
}

.stat-value {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 1.2rem;
  color: #a9c2ff;
  margin-bottom: 15px;
}

.stat-line {
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #00c3ff, transparent);
  margin: 0 auto;
}

/* 特性预览区域增强 */
.tech-background {
  background: linear-gradient(180deg, #070713, #0a0a1a);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.tech-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="none" stroke="rgba(0, 195, 255, 0.07)" stroke-width="1.5" d="M50,50 L50,150 L150,150 L150,250 L300,250 L300,350 L150,350 L150,450 L250,450 L250,550 L350,550 L350,650 L450,650 L450,750 M750,50 L650,50 L650,150 L550,150 L550,250 L600,250 L600,350 L500,350 L500,450 L600,450 L600,550 L700,550 L700,650 L750,650 M50,450 L250,450 M550,350 L750,350 M300,750 L300,550 L400,550 L400,450 L500,450 M550,150 L750,150 M550,650 L750,650 M300,250 L500,250 L500,150"/></svg>');
  opacity: 0.2;
  z-index: 1;
}

.features-preview {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.tech-title {
  position: relative;
  display: inline-block;
  margin: 0 auto 60px;
  left: 50%;
  transform: translateX(-50%);
}

.tech-title::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
}

.feature-card {
  margin-bottom: 30px;
  height: 100%;
  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border: none;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-card h3 {
  margin: 20px 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.card-content {
  color: #a9c2ff;
  line-height: 1.6;
  font-size: 1rem;
}

.tech-icon-wrapper {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 2px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.2);
  transition: all 0.3s ease;
}

.tech-icon {
  font-size: 30px;
  color: #00c3ff;
}

.feature-card:hover .tech-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.4);
}

.tech-line {
  width: 50px;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
  margin: 20px auto 0;
}

/* VR设备展示区域增强 */
.vr-devices-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #0a0a1a, #070713);
  position: relative;
  overflow: hidden;
}

.section-subtitle {
  text-align: center;
  color: #a9c2ff;
  font-size: 1.2rem;
  max-width: 800px;
  margin: -30px auto 50px;
}

.devices-showcase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}

.device-item {
  width: 45%;
  margin: 20px;
  position: relative;
}

.device-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
  border: 1px solid rgba(0, 195, 255, 0.2);
}

.device-image-container:hover {
  transform: scale(1.03);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 195, 255, 0.3);
}

.device-image {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.5s ease;
}

.device-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), transparent);
  z-index: 1;
}

.device-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
}

.device-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.device-specs {
  color: #a9c2ff;
  font-size: 0.9rem;
  display: flex;
}

.spec-item {
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.spec-icon {
  width: 20px;
  height: 20px;
  background: rgba(0, 195, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #00c3ff;
  margin-right: 5px;
}

/* 适应不同屏幕尺寸 */
@media screen and (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-content p {
    font-size: 1.2rem;
  }

  .stats-container {
    flex-direction: column;
    align-items: center;
  }

  .stat-item {
    width: 80%;
    margin-bottom: 30px;
  }

  .device-item {
    width: 90%;
  }
}

/* 合作伙伴区域样式 */
.partners-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #070713, #0a0a1a);
  position: relative;
  overflow: hidden;
}

.partners-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 50px;
}

.partner-item {
  margin: 15px 30px;
  text-align: center;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 30px;
  min-width: 180px;
  max-width: 200px;
  flex: 1;
  border: 1px solid rgba(0, 195, 255, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.partner-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 20%, rgba(0, 195, 255, 0.05), transparent 30%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.partner-item:hover {
  transform: translateY(-10px);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 195, 255, 0.3);
  border-color: rgba(0, 195, 255, 0.5);
}

.partner-item:hover::before {
  opacity: 1;
}

.partner-logo {
  font-size: 2rem;
  font-weight: 900;
  color: #00c3ff;
  margin-bottom: 15px;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  letter-spacing: 1px;
}

.partner-tag {
  font-size: 0.9rem;
  color: #a9c2ff;
  position: relative;
  padding-top: 15px;
}

.partner-tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
}

.tech-circuit-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="none" stroke="rgba(0, 195, 255, 0.07)" stroke-width="1.5" d="M50,50 L50,150 L150,150 L150,250 L300,250 L300,350 L150,350 L150,450 L250,450 L250,550 L350,550 L350,650 L450,650 L450,750 M750,50 L650,50 L650,150 L550,150 L550,250 L600,250 L600,350 L500,350 L500,450 L600,450 L600,550 L700,550 L700,650 L750,650 M50,450 L250,450 M550,350 L750,350 M300,750 L300,550 L400,550 L400,450 L500,450 M550,150 L750,150 M550,650 L750,650 M300,250 L500,250 L500,150"/></svg>');
  opacity: 0.1;
  z-index: 1;
  pointer-events: none;
}

/* 新闻动态区域样式 */
.news-section {
  padding: 100px 0;
  background: linear-gradient(180deg, #0a0a1a, #070713);
  position: relative;
  overflow: hidden;
}

.news-section .el-timeline {
  padding: 20px;
}

.news-section .el-timeline-item__node {
  background-color: #00c3ff;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
}

.news-section .el-timeline-item__tail {
  border-left-color: rgba(0, 195, 255, 0.3);
}

.news-section .el-timeline-item__timestamp {
  color: #00c3ff !important;
}

.news-card {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a) !important;
  border: 1px solid rgba(0, 195, 255, 0.2) !important;
  border-radius: 15px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.5s ease;
}

.news-card :deep(.el-card__body) {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a) !important;
  color: #fff !important;
  padding: 20px !important;
}

.news-card :deep(.el-card__header) {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(0, 195, 255, 0.2) !important;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 195, 255, 0.3) !important;
  border-color: rgba(0, 195, 255, 0.5) !important;
}

.news-card h4 {
  color: #00c3ff;
  margin: 15px 0;
  font-size: 1.3rem;
}

.news-card p {
  color: #a9c2ff;
  line-height: 1.6;
}

.news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid rgba(0, 195, 255, 0.2);
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
  transform: scale(1.05);
}

.tech-badge {
  display: inline-block;
  background: rgba(0, 195, 255, 0.1);
  color: #00c3ff;
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  margin-top: 10px;
  border: 1px solid rgba(0, 195, 255, 0.3);
}

.vr-space-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.vr-grid-plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(to right, rgba(0, 195, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(1000px) rotateX(60deg) scale(1.5);
  transform-origin: center bottom;
  animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}
</style>
